<style lang="scss" scoped>

  $font-color:#777;

  $green:#1fc6a0;

  .half-width{
    width:50%;
  }

  .full-width{
    width:100%;
  }

  .line{
    height: 40px;
    position: relative;
    margin: 15px 0;
    float: left;
  }

  .font{
    font-size: 16px;
    font-family: '微软雅黑';
    color: $font-color;
  }

  .add-input-label{
    @extend  .font;
    height: 40px;
    line-height: 40px;
    display: block;
    position: absolute;
    left:0;
    top:0;
    text-align: center;
  }

  .wrapper{
    padding-left: 70px;
    height: 40px;
    width:100%;
    padding-right: 10px;
    position: relative;
    .input-box{
      width:100%;
      outline:none;
      height: 34px;
      margin-top: 3px;
      padding: 0 5px;
      border: #ccc solid 1px;
      border-radius: 3px;
      /*border-radius: 3px;*/
      &:focus{
        box-shadow: 0 0 3px $green inset;
        border: 1px solid $green;
      }
    }

    span{
      position: absolute;
      right:10px;
      top:0;
      width:40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      display: inline-block;
      color: #777;
    }

    .icon-search{
      @extend span;
      width:30px;
      height: 30px;
      margin-top: 5px;
      background-size: cover;
      background-image: url("../../../../../assets/images/query-inner.png");
      right:15px;
      cursor: pointer;
    }

  }


</style>

<template>
  <div class="line" :class="{'half-width':size==1,'full-width':size==2}">
    <span class="add-input-label" :style="{width:labelWidth+'px'}">{{label}}</span>
    <div class="wrapper" :style="{paddingLeft:(labelWidth+10)+'px',paddingRight:(right+10)+'px'}" >
      <select class="input-box" ref="select" v-model="inputValue" :disabled="disabled"
             :placeholder="placeholder" >
        <template v-for="item in options">
          <option :value="item.value"  v-if="item.value!=value"  :disabled="item.default">{{item.key}}</option>
          <option :value="item.value"  v-else :disabled="item.default" data-selected>{{item.key}}</option>
        </template>
      </select>
      <slot name="other">

      </slot>
    </div>
  </div>
</template>

<script>

  export default {
    name:"InputBox",
    props:{
      type:{
        type:String,
        default:'text'
      },
      placeholder:{
        type:String,
        required:false,
        default:'请输入'
      },
      labelWidth:{
        type:Number,
        required:false,
        default:60
      },
      size:{
        type:Number,
        required:false,
        default:1
      },
      label:{
        type:String,
        required:true,
        default:'标签1'
      },
      value:{
        type:[String, Number],
        default:''
      },
      options:{
        type:Array,
        required:true,
        default:[]
      },
      disabled:{
        type:Boolean,
        required:false,
        default:false
      }
    },
    updated(){

        document.querySelectorAll("option").forEach((element)=>{

          if (element.hasAttribute('data-selected')){
            element.selected=true;
          }

          console.log('has done');

        });
    },
    beforeMount(){

      var counter=0;

      for(var key in this.$slots){

        if (this.$slots.hasOwnProperty(key)){
          counter++;
        }

      }

      if (counter<=0){
        this.right=0;
      }
      else{
        this.right=50;
      }

      /**
       * 从外界给select绑定值
       */
      this.inputValue=this.value;

    },
    data(){
      return {
        right:0,
        inputValue:''
      }
    },
    watch:{
      inputValue:function(newValue,oldValue){

        this.$emit('input',newValue);

      }
    }
  }
</script>
